<template>
    <view class="body">
		<globalNavBar title="我的预约"/>
		<uv-empty mode="data" v-if="listData.length == 0" marginTop="100rpx">
			<uv-button customStyle="marginTop:20rpx" @click="goToYuyue()" type="error" text="立即预约"></uv-button>
		</uv-empty>
		
		<view v-if="listData.length > 0">
		<uv-row customStyle="margin: 10rpx; 0">
			<uv-col span="6">
				<view class="demo-layout bg-purple">预约日期</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-dark">预约状态</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-dark">操作</view>
			</uv-col>
		</uv-row>
		
		<uv-row customStyle="margin-bottom: 10rpx; border-bottom:1rpx solid #eee; padding:20rpx 0;"  v-for="item in listData" :key="item.id" >
			<uv-col span="6">
				<view class="demo-layout bg-purple-light" style="text-align: left; padding-left: 15rpx;">姓名：{{item.username}}</view>
				<view class="demo-layout bg-purple-light" style="text-align: left; padding-left: 15rpx;">手机：{{item.mobile}}</view>
				<view class="demo-layout bg-purple-light" style="font-size: 25rpx; text-align: left; padding-left: 15rpx;">日期：{{item.yuyueinfo}}</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-dark">{{item.status_text}}</view>
			</uv-col>
			<uv-col span="3" >
				<uv-button @click="cannel(item.id)" customStyle="width:180rpx; marginTop:10rpx;" v-if="item.status == 1" text="取消" size="mini" shape="circle" type="error"></uv-button>
				<uv-button @click="yuyueinfo(item.id)" customStyle="width:180rpx; marginTop:10rpx;"  text="查看详情" size="mini" shape="circle" type="success"></uv-button>
			</uv-col>
		</uv-row>
		</view>
		<uv-modal ref="modal" title="取消预约" content='是否确定取消' @confirm="confirm"></uv-modal>
    </view>
</template>

<script>
	import http from '@/utils/request.js'
    export default {
        data() {
            return {
				listData:[],
				yuyueid:0,
			};
        },
		onLoad() {
			this.getInfo();
		},
		methods:{
			goToYuyue(){
				uni.navigateTo({
					url:'/pages/booking/visit'
				})
			},
			getInfo(){
				var that = this;
				http.post('api/Yuyue/list',{}).then(function(data){
					let list = data.data.data;
					for(let i = 0; i < list.length; i++){
						that.listData.push({
							id:list[i].id,
							status_text:list[i].status_text,
							status:list[i].status,
							yuyueinfo:list[i].yuyue_date_format,
							username:list[i].username,
							mobile:list[i].phone,
						})
					}
				})
			},
			cannel(id){
				this.yuyueid = id;
				this.$refs.modal.open();
			},
			confirm(){
				http.post('api/Yuyue/venue_cancel',{id:this.yuyueid}).then(function(data){
					if(data.code == 1){
						uni.showToast({
							icon:'success',
							title:'操作成功'
						})
						setTimeout(function(){
							uni.reLaunch({
								url:'/pages/booking/mylist',
							})
						},1000)
					}
				})
			},
			yuyueinfo(id){
				uni.navigateTo({
					url:'/pages/booking/yuyueinfo?id='+id
				})
			}
		}
    }
</script>

<style lang="scss">
.demo-layout{
	text-align: center;
}
body{
	background-color: #f4f4f2;
	font-size: 30rpx;
	
}
</style>
